<template>
	<view class="content">
		<view class="upper">
			<image src="@/static/image/home/logo.jpg" mode=""></image>
			<text class="texta">小黄蜂高端家政</text>
			<text class="text_area">全自营 · 非中介 · 更专业</text>
		</view>
		<view class="btn">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">手机号一键登录</button>
		</view>
	</view>
</template>

<script>
import { setLogin, setSessionKey } from '@/api/user.js'
import { mapMutations } from 'vuex'
export default {
	data() {
		return {
			code: '',
			id: null
		}
	},
	onShow() {
		uni.login({
			success: (res) => {
				this.code = res.code
			}
		})
	},
	onLoad(options) {
		this.id = options.id
	},
	methods: {
		...mapMutations('user', ['token', 'isLogin', 'userInfo']),
		setoad(data) {
			setLogin(data).then(res => {
				if (res.code === 1) {
					const userinfo = res.data.userinfo
					this.token(userinfo.token)
					this.isLogin(true)
					this.userInfo(userinfo)
					this.$showToast('登录成功！')
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/reservation/reservation?id=" + this.id,
						});
					}, 500)
				} else {
					this.$showToast(res.msg)
					uni.login({
						success: (res) => {
							this.code = res.code
						}
					})
				}
			})
		},
		// 手机号一键登录
		getPhoneNumberHandler(params) {
			const { iv, encryptedData, errMsg } = params.detail;
			if (errMsg !== 'getPhoneNumber:ok') return;
			setSessionKey({
				code: this.code,
			}).then(res => {
				if (res.code === 1) {
					const obj = {
						session_key: res.data.session_key,
						unionid: res.data.unionid,
						openid: res.data.openid,
						encryptedData: encryptedData,
						iv: iv
					}
					this.setoad(obj)
				} else {
					this.$showToast(res.msg)
				}
			})

		},
		toAgreement(url) {
			uni.navigateTo({
				url: url
			})
		},
	}
}
</script>

<style scoped lang="scss">
.bottom {
	width: 100%;
	position: absolute;
	bottom: 10%;

	.bot_text {
		display: flex;
		justify-content: center;
		padding: 0 100rpx;

		.radio {
			text-align: center;
			font-size: 26rpx;

			.user {
				color: #edbd1d;
			}
		}
	}
}

.content {
	height: 100%;

	.upper {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 150rpx;
			margin-top: 120rpx;
		}

		.texta {
			font-size: 45rpx;
			font-weight: bold;
			margin-top: 45rpx;
		}

		.text_area {
			font-size: 30rpx;
			letter-spacing: 2rpx;
			margin-top: 20rpx;
			color: #606266;
		}
	}
}

.top_img {
	width: 100%;
	height: 35vh;
	background-color: beige;
}

radio {
	transform: scale(0.7);
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 160rpx;
	padding: 0 100rpx;

	button {
		background-color: #edbd1d;
		color: #333;
		border-radius: 85rpx;
		border-color: #edbd1d;
		height: 85rpx;
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 4rpx;

		&::after {
			content: none;
		}
	}
}
</style>
